<template>
    <el-card>
        <el-row :gutter="20">
            <el-col :span="6">
                <el-input v-model.trim="FormParams.input" placeholder="请输入站点名称、id">
                    <template #append>
                        <el-select v-model="select" style="width: 115px">
                            <el-option label="按名称查询" value="name" />
                            <el-option label="按ID查询" value="id" />
                        </el-select>
                    </template>
                </el-input>
            </el-col>
            <el-col :span="6">
                <el-select v-model="FormParams.value" placeholder="充电桩使用状态">
                    <el-option label="全部" :value="1"></el-option>
                    <el-option label="使用中" :value="3"></el-option>
                    <el-option label="空闲中" :value="2"></el-option>
                    <el-option label="维护中" :value="4"></el-option>
                    <el-option label="待修中" :value="5"></el-option>
                </el-select>
            </el-col>
            <el-col :span="6">
                <el-button type="primary" @click.trim="loadData">查询</el-button>
                <el-button @click="resetData">重置</el-button>
            </el-col>
        </el-row>
    </el-card>
    <el-card class="mt">
        <el-row :gutter="20">
            <el-col :span="6">
                <el-statistic title="累计充电量(度)" value="268,900"></el-statistic>
            </el-col>
            <el-col :span="6">
                <el-statistic title="累计充电次数(次)" value="1,389"></el-statistic>
            </el-col>
            <el-col :span="6">
                <el-statistic title="服务区域(个)" value="80"></el-statistic>
            </el-col>
            <el-col :span="6">
                <el-statistic title="累计效益(元)" value="5,622,175"></el-statistic>
            </el-col>
        </el-row>
    </el-card>
    <el-card class="mt">
        <el-button icon="Plus" type="primary" @click="add">新增充电站</el-button>
    </el-card>
    <el-card class="mt">
        <el-table :data="tableData" style="width: 100%" v-loading="loading">
            <el-table-column type="index" label="序号" width="80" />
            <el-table-column prop="name" label="站点名称" />
            <el-table-column prop="id" label="站点ID" />
            <el-table-column prop="city" label="所属城市" />
            <el-table-column prop="fast" label="快充数" />
            <el-table-column prop="slow" label="慢充数" />
            <el-table-column prop="status" label="充电站状态">
                <template #default="scope">
                    <el-tag v-if="scope.row.status === 2" type="primary">空闲中</el-tag>
                    <el-tag v-if="scope.row.status === 3" type="success">使用中</el-tag>
                    <el-tag v-if="scope.row.status === 4" type="warning">维护中</el-tag>
                    <el-tag v-if="scope.row.status === 5" type="danger">待维修</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="now" label="正在充电" />
            <el-table-column prop="fault" label="故障数" />
            <el-table-column prop="person" label="负责人" />
            <el-table-column prop="tel" label="负责人电话" />
            <el-table-column label='操作'>
                <template #default="scope">
                    <el-button type="primary" @click="edit(scope.row)">编辑</el-button>
                    <el-popconfirm @confirm="deleteStation(scope.row.id)" title="删除后不可以恢复，是否要删除?">
                        <template #reference>
                            <el-button type="danger">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination class="mt mb fr" v-model:current-page="pageInfo.page" v-model:page-size="pageInfo.pageSize"
            :page-sizes="[10, 20, 30, 40]" background layout="total, sizes, prev, pager, next, jumper" :total="totals"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </el-card>
    <StationForm :isShowDialog="isShowDialog" @close="isShowDialog = false" @reload="loadData"></StationForm>
</template>


<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { getStationListAPI, DeleteAPI } from '@/api/chargingstation'
import { useStationStore } from '@/store/station'
import { ElMessage } from 'element-plus'
import StationForm from './components/StationForm.vue'
const loading = ref<boolean>(false)
const select = ref<string>('name')
// total数量
const totals = ref<number>(0)
//  table数据
const tableData = ref<any[]>([])
const FormParams = reactive<{ input: string, value: number }>({
    input: '',
    value: 1
})
const pageInfo = ref<{ page: number, pageSize: number }>({
    page: 1,
    pageSize: 10
})
// 分页页码数据
const loadData = async () => {
    loading.value = true
    //  [select.value] 动态变量
    const { data: { list, total } } = await getStationListAPI({ ...pageInfo.value, status: FormParams.value, [select.value]: FormParams.input })
    loading.value = false
    tableData.value = list
    totals.value = total
}

onMounted(async() => {
    loadData()
    
})

const handleSizeChange = (size: number) => {
    pageInfo.value.pageSize = size
    loadData()
}

const handleCurrentChange = (page: number) => {
    pageInfo.value.page = page
    loadData()
}

const resetData = () => {
    pageInfo.value.page = 1
    pageInfo.value.pageSize = 10
    FormParams.input = ''
    FormParams.value = 1
    loadData()
}

//-------------------------------------------------------------------------------------------------------


// 是否展示对话框
// destroy-on-close 关闭组件的时候销毁组件
const isShowDialog = ref<boolean>(false)
const stationStore = useStationStore()
// 编辑状态管理
const { setData, resetStation } = stationStore
// 编辑按钮
const edit = (row: any) => {
    setData(row)
    isShowDialog.value = true

}
const add = () => {
    resetStation()
    isShowDialog.value = true

}
const deleteStation = async (id: string) => {
    await DeleteAPI(id)
    ElMessage({
        message: '删除成功',
        type: 'success',
    })
    loadData()
}

</script>